<template>

    <el-header style="display: inline-flex;    align-items: center;float: right;">

        <div class="flex-grow" style="float: right;">
            <el-button type="primary" plain @click="dialogFormVisible = true">添加账号</el-button>
        </div>
        <!-- 对话框组件 -->


    </el-header>
    <div class="row">
        <el-col :span="24">
            <h1>管理员信息</h1>
        </el-col>
    </div>
    <el-dialog v-model="dialogFormVisible" title="新建管理员信息" width="500">
        <el-form :model="form">
            <el-form-item label="用户id" :label-width="formLabelWidth">
                <el-input v-model="form.userid" autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.userpassword" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false; buildAdminAccount()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="用户id（电话）" width="180" />
        <el-table-column prop="name" label="用户名" width="180" />
        <el-table-column prop="password" label="密码" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import axios from 'axios' //导入 Axios
import { reactive, ref } from 'vue'
</script>

<script>


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    userid: '',
    username: '',
    userpassword: '',

})

export default {
    data() {
        return {
            tableData: [],
            componentKey: 0,
        }
    },
    created() {
        this.getAllAdminData()
    },
    methods: {
        userSignup() {

        },
        handleDelete(userid) {
            const data = { "userid": userid }
            console.log(data);
            this.$axios.post('/index.php/Management/deleteFromAdminData', data)
                .then(response => {
                    // 处理成功的响应
                    console.log(response.data.message);// 根据需要进行进一步处理
                    this.getAllAdminData();

                })
                .catch(error => {
                    // 处理错误
                    console.error('There was an error!', error);
                    this.message = 'Error: ' + error.message;
                });
        },

        getAllAdminData() {
            this.$axios.get('/index.php/Management/getAllAdminData')
                .then(response => {
                    console.log("userwaitdata的请求状态：" + response.data.message);
                    console.log("userwaitdata请求到的数据：");
                    console.log(response.data.data);
                    this.tableData = response.data.data;
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    this.message = 'Error: ' + error.message;
                });
        },
        buildAdminAccount() {
            this.$axios.post('/index.php/Management/buildAdminAccount', form)
                .then(response => {
                    // 处理成功的响应
                    alert(response.data.message);
                    this.getAllAdminData();

                    // this.handleLogin(response.data.message); // 根据需要进行进一步处理
                })
                .catch(error => {
                    // 处理错误
                    console.error('There was an error!', error);
                    this.message = 'Error: ' + error.message;
                });
        },


    },


}
</script>




<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<style scoped>
.flex-grow {
  flex-grow: 1;
}
.element-center {
  display: flex;
  justify-content: center;
}
</style>
